<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Web Camera</title>
	<link rel="stylesheet" href="jquery/css/jquery.ui.all.css" />
	<link rel="stylesheet" href="css/common.css" />
	<script src="jquery/jquery-1.9.1.min.js"></script>
	<script src="jquery/jquery.ui.core.js"></script>
	<script src="jquery/jquery.ui.widget.js"></script>
	<script src="jquery/jquery.ui.mouse.js"></script>
	<script src="jquery/jquery.ui.slider.js"></script>
	<script src="jquery/json2.js"></script>
	<script src="js/network.js"></script>
	<script src="js/common.js"></script>
	<script src="js/plugin.js"></script>
	<script src="js/glDatePicker.min.js"></script>
	<link href="css/glDatePicker.default.css" rel="stylesheet" type="text/css" />
	<link href="css/glDatePicker.darkneon.css" rel="stylesheet" type="text/css" />
	<link href="css/glDatePicker.flatwhite.css" rel="stylesheet" type="text/css" />
</head>
<script  type="text/javascript"> 
//语言包初始化
document.write(GetLanguagePathStr());
</script>
<style type="text/css">
.PreviewHead{
	background:#2e3339;
	height:37px;
}

.StreamButton{
	width:90px;
	height:23px;
	line-height:23px;
	background:#1e3b56;
	margin-top:7px;
	margin-left:15px;
	float:left;
	border-radius:5px;
}

.StreamButton:hover{
	background:#64b9fa;
}

.StreamButtonSelected{
	background:#64b9fa;
}

.HeadButtonIco{
	width:43px;
	height:36px;
	cursor: pointer;
	float:left;	
	/*border:1px solid black;*/
}


.VideoArea{
	background:#000000;
	float:right;
	width:1000px;
	height:600px;
} 

.ParamArea{
	background:#15161a;
	float:right;
	width:265px;
	height:600px;
}


.Lable{
	width: 110px;
	float: left;
}

.IcoOptPtz{
	background:url(./img/normal.png) -402px -256px;
}
.IcoOptBack{
	background:url(./img/normal.png) -2px -256px;
}
.IcoOptNext{
	background:url(./img/normal.png) -52px -256px;
}
.IcoOptPlay{
	background:url(./img/normal.png) -102px -256px;
}
.IcoOptUP{
	background:url(./img/normal.png) -152px -256px;
}
.IcoOptFront{
	background:url(./img/normal.png) -202px -256px;
}
.IcoOptSnap{
	background:url(./img/normal.png) -252px -256px;
}
.IcoOptVoice{
	background:url(./img/normal.png) -302px -256px;
}

.TimeBarText{
	margin-left:29px;
	width:16px;
	height:20px;
	float:left;
	font-size:12px;
	color:#ffffff;
}
.TimeBarGop{
	width:45px;
	height:5px;
	border-right:1px solid #ffffff;
	float:left;
}
.TimeBarNoGop{
	width:44px;
	height:5px;
	float:left;
}
.TimeBarLine{
	width:44px;
	height:10px;
	background:#BBBDBF;
	border-right:1px solid #ffffff;
	float:left;
}

.DivBox{
	width:10px;
	height:10px;
	background:red;
	float:left;
	margin-top:3px;
}
.DivBoxTxt{
	margin-left:1px;
	float:left;
	font-size:13px;
	color:#ffffff;
}

</style>


<body style="min-width:1200px;min-height:680px;">
<div class="PreviewHead" >
<div class="DivButton StreamButton" id="id_MainStream">Local</div>
<div class="DivButton StreamButton" id="id_SubStream">Remote</div>
<div style="clear:both;"></div>
</div>
<div class="ParamArea" id="id_ParamArea">
	<div style="height:30px;"></div>
	<div id="id_page1">
	<div class="DivLable Lable" id="id_txtFileType">File type:</div>
	<div style="float:left"> 
		<div class="ClassContentSelect" id="id_FileType" style="width:96px;">Video</div>
		<div class="DivContentSelectIco" id="id_FileType_selectico"></div>
		<div style="clear:both"></div>
		<div class="ClassContentSelectOption" name="id_FileType_option"  id="id_txtImage" style="margin-top:0px;width:120px;">Image</div>
		<div class="ClassContentSelectOption" name="id_FileType_option"  id="id_txtVideo" style="margin-top:24px;width:120px;">Video</div>
	</div>
	<div style="clear:both;"></div>
	<div style="height:20px;"></div>
	<div class="DivLable Lable" id="id_txtDatasource">Data Source:</div>
	<div style="float:left"> 
		<div class="ClassContentSelect" id="id_Datasource" style="width:96px;">SDCard</div>
		<div class="DivContentSelectIco" id="id_Datasource_selectico"></div>
		<div style="clear:both"></div>
		<div class="ClassContentSelectOption" name="id_Datasource_option"  id="id_txtSdCard" style="margin-top:0px;width:120px;">SDCard</div>
		<div class="ClassContentSelectOption" name="id_Datasource_option"  id="id_txtLocal" style="margin-top:24px;width:120px;">Local</div>
	</div>
	<div style="clear:both;"></div>
	<div style="height:25px;"></div>
	<input type="text"  class="DivInput"  style="width:250px;display:block; border-width:0px 0px 0px 0px; color:#15161a;cursor:default;" id="id_date" />
	<!-- <div style="margin-top: 285px; margin-left:100px;color:#ffffff;font-family:arial;font-weight:bold;font-size:16px;">Today is 2017/04/19</div> -->
	<div class="DivButton" style=" margin:auto;margin-top: 17px;color:#ffffff;font-family:arial;font-weight:bold;font-size:16px;width:200px;" id="id_PageGo">查询</div>
	</div>
	<div style="display:none;" id="id_page2">
		<div class="DivLable">文件列表</div>
		<div style="border:2px solid #1e3856; height:350px;width:240px;">
	
			<div class="DivLable" style="float:left;width:100px;border-right:2px solid #1e3856;border-bottom:2px solid #1e3856;">时间</div>
			<div class="DivLable" style="float:left;width:85px; border-right:2px solid #1e3856;border-bottom:2px solid #1e3856;">文件类型</div>
			<div class="DivLable" style="float:left;width:50px; border-bottom:2px solid #1e3856;">操作</div>
			<div style="clear:both;"></div>
			
		</div>
		<div class="DivButton" style=" margin:auto;margin-top: 17px;color:#ffffff;font-family:arial;font-weight:bold;font-size:16px;width:200px;" id="id_PageBack">回退</div>
	</div>
	<!-- <div style="bottom:142px; position:absolute;height:40px;background:#1e3856;width:256px;"></div> -->
</div>
<div class="VideoArea" id="id_VideoArea" >

</div>

<div style="clear:both;"></div>
<div  id="id_VedioCtrolArea" style="height:142px;width:100%;background:#2e333339;">
	<div style="clear:both;"></div>
	<div style="width:60px;height:55px;float:left;"></div>
	<div style="width:434px;height:55px;float:left;">
		<div class="HeadButtonIco IcoOptBack" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptNext" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptPlay" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptUP" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptFront" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptSnap" id="id_IcoOptPtz"></div>
		<div class="HeadButtonIco IcoOptVoice" id="id_IcoOptPtz"></div>
	</div>	
	<div style="width:160px;height:23px;float:left;color:#ffffff;margin-top:10px;">2017-04-15 09:00:00</div>
	<div style="clear:both;"></div>
	<div style="width:100%">
		<div style="width:1100px;height:40px;margin-left:40px;" id="id_TimeBarBox"></div>
	</div>
	<div style="clear:both;"></div>
	<div style="width:100%">
		<div style="width:400px;height:40px;margin:auto;" >
			<div class="DivBox" style="background:red;"></div><div class="DivBoxTxt" id='id_txtAlarm'>报警录像</div><div style="width:27px;height:10px;float:left;"></div>
			<div class="DivBox" style="background:blue;"></div><div class="DivBoxTxt" id='id_txtTime'>定时录像</div><div style="width:27px;height:10px;float:left;"></div>
			<div class="DivBox" style="background:green;"></div><div class="DivBoxTxt" id='id_txtMothod'>手动录像</div>
			<div class="DivBox" style="background:yellow;"></div><div class="DivBoxTxt" id='id_txtmotion'>移动录像</div><div style="width:27px;height:10px;float:left;"></div>
		</div>
	</div>
	
</div>

</body>
<script  type="text/javascript"> 
//语言包初始化

function InitLang()
{
	SetLang('id_MainStream',str_LocalRe);
	SetLang('id_SubStream',str_RemoteRe);
	SetLang('id_PageGo',str_btnSearch);
	SetLang('id_txtAlarm',str_AlarmRe);
	SetLang('id_txtmotion',str_PlayCh);
	SetLang('id_txtTime',str_TimerRe);
	SetLang('id_txtMothod',str_ManualRe);
	
	SetLang('id_txtFileType',str_FileType);
	SetLang('id_txtDatasource',str_FileSource);
	SetLang('id_txtImage',str_Image);
	SetLang('id_txtVideo',str_Video);
	SetLang('id_txtSdCard',str_SDCard);
	SetLang('id_txtLocal',str_Local);
}
</script> 
<script  type="text/javascript"> 
function PageChange(id)
{
	var page0 = document.getElementById('id_page1');
	var page1 = document.getElementById('id_page2');
	if(id == 'id_PageBack'){
		page0.style.display = "block";
		page1.style.display = "none";
		//$('#id_date').glDatePicker({showAlways: true});
		//document.getElementsByName('gldp-darkneon')[0].display = "block";
	}else{
		page0.style.display = "none";
		page1.style.display = "block";
		//document.getElementsByName('gldp-darkneon')[0].display = "none";
		//$('#id_date').glDatePicker({showAlways: false});
	}
	
}

$(function() {//页面初始化
	InitLang();
	InitLayOut();
	InitUdfSelect('id_FileType');
	InitUdfSelect('id_Datasource');
	SetSelectionOptID('id_FileType',0);
	SetSelectionOptID('id_Datasource',0);
	InitglDate();
	//BindEvent('id_PageGo','onmousedown',PageChange,'id_PageGo');
	//BindEvent('id_PageBack','onmousedown',PageChange,'id_PageBack');
	var timebar = new TimeLineBar('id_TimeBarBox',null);
});

$(window).resize(function() {    
	InitLayOut();
});

function InitLayOut()
{
	var width = document.body.clientWidth  - 265;
	var height = document.body.clientHeight - 37 - 142;
	
	$("#id_VideoArea").width(width+"px");
	$("#id_VideoArea").height(height+"px");
	$("#id_ParamArea").height(height+"px");
}

function  InitglDate()
{
	$('#id_date').glDatePicker(
	{
		showAlways: true,
		cssName: 'darkneon',
		//cssName: 'default',
		//cssName: 'flatwhite',
		selectedDate: new Date(),
		dowOffset:0,
		dowNames:[ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
		monthNames:[ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
	});
}

var TimeLineBar = function(id,callBackfun){
	
	InitLayOut();
	
	function InitLayOut(){
		var appendFontStr = "";
		var appendTimeGopStr = "";
		var appendTimeStr = "";
		for(var i = 0;i < 12;i ++){
				appendFontStr += '<div class="TimeBarText"></div>';
				if(i < 4){
					appendFontStr += '<div class="TimeBarText">0'+(i+1)*2+':00</div>';
				}else{
					appendFontStr += '<div class="TimeBarText">'+(i+1)*2+':00</div>';
				}
				appendTimeGopStr += '<div class="TimeBarNoGop" ></div>';
				appendTimeGopStr += '<div class="TimeBarGop"></div>';
				appendTimeStr += '<div class="TimeBarLine"></div>';
				appendTimeStr += '<div class="TimeBarLine"></div>';
		}
	//	alert(appendFontStr);
	//	alert(appendTimeGopStr);
	//	alert(appendTimeStr);
		$("#"+id).append(appendFontStr);
		$("#"+id).append('<div style="clear:both;"></div>');
		$("#"+id).append(appendTimeGopStr);
		$("#"+id).append('<div style="clear:both;"></div>');
		$("#"+id).append(appendTimeStr);
		$("#"+id).append('<div style="clear:both;"></div>');
	}
}
</script> 
</html>
</html>